<template>
  <div>
    <el-card shadow="hover"
             v-if="gadgetSetting.dateDefaultSetting.show">
      <p style='margin-bottom: 10px;'>
        <span v-if='"" !== gadgetSetting.dateDefaultSetting.name'
              style='font-size:16px; font-weight: 600'>{{gadgetSetting.dateDefaultSetting.name}}</span>
        <el-tooltip :open-delay="1000" class="item"
                    effect="dark"
                    :content="gadgetSetting.dateDefaultSetting.description"
                    placement="right"
                    v-if='"" !== gadgetSetting.dateDefaultSetting.description'>
          <i class="cuifont icon_help_circle"
             style='margin-left:5px;'></i>
        </el-tooltip>
      </p>
      <el-form :inline="true">
      <el-form-item v-loading='loading'>
        <ejs-datepicker style="width:200px;"
                        :placeholder="$t('custom.marketbot.clientUsageReport.selectDate')"
                        v-model="searchDate"
                        :start="gadgetSetting.dateDefaultSetting.start"
                        :depth="gadgetSetting.dateDefaultSetting.depth"
                        :min="gadgetSetting.dateDefaultSetting.minDate"
                        :max="gadgetSetting.dateDefaultSetting.maxDate"
                        @change="getDataListParams"
                        :format="gadgetSetting.dateDefaultSetting.format"></ejs-datepicker>
      </el-form-item>
      <model :showSetting="queryModelDefaultSetting.showSetting"
             @queryModelClosed="queryModelClosed"
             :dataInfo="queryModelDefaultSetting.dataInfo"
             :updateGadget="upgradeGadgetSetting" />
    </el-form>
    </el-card>
    <el-form :inline="true" v-else>
      <el-form-item v-loading='loading'>
        <ejs-datepicker style="width:200px;"
                        :placeholder="$t('custom.marketbot.clientUsageReport.selectDate')"
                        v-model="searchDate"
                        :start="gadgetSetting.dateDefaultSetting.start"
                        :depth="gadgetSetting.dateDefaultSetting.depth"
                        :min="gadgetSetting.dateDefaultSetting.minDate"
                        :max="gadgetSetting.dateDefaultSetting.maxDate"
                        @change="getDataListParams"
                        :format="gadgetSetting.dateDefaultSetting.format"></ejs-datepicker>
      </el-form-item>
      <model :showSetting="queryModelDefaultSetting.showSetting"
             @queryModelClosed="queryModelClosed"
             :dataInfo="queryModelDefaultSetting.dataInfo"
             :updateGadget="upgradeGadgetSetting" />
    </el-form>
  </div>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
// import model from '@/components/gadget/query-model/query-model.vue'
import { defaultGadgetSettingList } from '@/utils/data-json'
import moment from 'moment'
export default {
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model') },
  data () {
    return {
      mixinViewModuleOptions: {
        pageId: this.pageId
      },
      searchDate: null,
      loading: false,
      gadgetSetting: {
        dateDefaultSetting: {
        }
      },
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: 'dateSlicer',
          gadgetSettingExclude: ['DATA'],
          gadgetSetting: this._.find(defaultGadgetSettingList, { gadgetType: 'dateSlicer' }).gadgetSetting
          // gadgetSetting: {
          //   dateDefaultSetting: {
          //     format: 'yyyy-MM-dd',
          //     start: '',
          //     depth: '',
          //     minDate: new Date('1/1/1990'),
          //     maxDate: new Date('1/1/2125'),
          //     show: false,
          //     name: '',
          //     description: ''
          //   }
          // }
        }
      }

    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.resetslicer()
    this.query()
    this.$store.state.isWidget = false
  },
  methods: {
    resetslicer () {
      var savedDate = localStorage.getItem(this.pageId + '-date-slicer-gadget')
      if (savedDate == null) {
        this.searchDate = moment().subtract('days', 0).format()
      } else {
        this.searchDate = JSON.parse(savedDate)
      }
      this.getDataListParams()
    },
    getDataListParams () {
      var _self = this
      if (_self.searchDate) {
        _self.slicer.dateTo = moment.tz((moment(_self.searchDate).format('YYYY-MM-DD') + 'T00:00:00'), this.$store.state.user.timezoneId).utc().format()
        localStorage.setItem(this.pageId + '-date-slicer-gadget', JSON.stringify(_self.searchDate))
      } else {
        delete _self.slicer.dateTo
        localStorage.removeItem(this.pageId + '-date-slicer-gadget')
        return this.$message.error(this.$t('custom.marketbot.clientUsageReport.selectDate'))
      }
    },
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    query () {
      this.loading = true
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      var _self = this
      const params = {
        // businessId: this.pageId,
        gadgetId: this.id,
        includeSql: false,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName
      }
      this.$interface.reports.getReportSettingInfo(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return _self.$message.error(res.msg)
        }
        if (res.data) {
          _self._.merge(_self.gadgetSetting, res.data.gadgetSetting)
        }
        _self.loading = false
      })
    }

  }
}
</script>
<style scoped>
</style>
